<script lang="ts" setup>
import type { TabOption } from '@vben/types';

import { computed, onMounted, ref } from 'vue';

import { AnalysisChartsTabs, AnalysisOverview } from '@vben/common-ui';
import { SvgCakeIcon } from '@vben/icons';

import { getCountHome } from '#/api';
import { BASE_ICON_URL } from '#/config'; // 引入全局配置

import AnalyticsTrends from './components/analytics-trends.vue';
import PendingOrder from './components/PendingOrder.vue';

const countData = ref({
  invoicePendingReviewCount: 0,
  todayCheckInCount: 0,
  todayNewOrderCount: 0,
  todayOrderAmount: 0,
  totalCheckInCount: 0,
  totalInvoiceCount: 0,
  totalOrderAmount: 0,
  totalOrderCount: 0,
});

const overviewItems = computed(() => {
  return [
    {
      icon: `${BASE_ICON_URL}xinding.png`,
      title: '今日新订',
      value: countData.value.todayNewOrderCount || 0,
      totalTitle: '总订单数',
      totalValue: countData.value.totalOrderCount || 0,
    },
    {
      icon: SvgCakeIcon,
      title: '今日入住',
      value: countData.value.todayCheckInCount || 0,
      totalTitle: '总入住数',
      totalValue: countData.value.totalCheckInCount || 0,
    },
    {
      icon: `${BASE_ICON_URL}daikai.svg`,
      title: '待审核发票',
      value: countData.value.invoicePendingReviewCount || 0,
      totalTitle: '总发票数',
      totalValue: countData.value.totalInvoiceCount || 0,
    },
    {
      icon: `${BASE_ICON_URL}xiaoshou.png`,
      title: '今日下单金额',
      value: countData.value.todayOrderAmount || 0,
      totalTitle: '总下单金额',
      totalValue: countData.value.totalOrderAmount || 0,
      decimals: 2,
    },
  ];
});

const chartTabs: TabOption[] = [
  {
    label: '近30天订单走势图',
    value: 'trends',
  },
];

const getCount = async () => {
  try {
    const { data } = await getCountHome();
    countData.value = data;
  } catch (error) {
    console.error('获取统计失败：', error);
  }
};

onMounted(async () => {
  getCount();
});
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />
    <PendingOrder class="mt-5" />
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
    </AnalysisChartsTabs>
  </div>
</template>
